<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<!-- @click使得数值和总价的改变, computed属性的属性,小预习一波v-for-->
<body>
    <div id="root">
        <table border="1px" cellpadding="5px" cellspacing="0">
            <tr v-for="item in goods">
                <td><span>{{item.name}}</span></td>
                <!-- 减法，三元表达式+插入表达式 -->
                <td><button @click="item.num == 0? item.num = 0 : item.num--">-1</button></td>
                <td><span>{{item.num}}</span></td>
                <!-- 加法，用了插入表达式 -->
                <td><button @click="item.num++">+1</button></td>
                <td><span>单价:{{item.price}}</span></td>
                <td><span>总价:{{item.num*item.price}}</span></td>
            </tr>
        </table>
        <span>总价：{{SumPrice}}</span>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    num: 1,
                    goods:[
                        {
                            name:'猎魔人',
                            price:88,
                            num:1
                        },
                        {
                            name:'地铁',
                            price:100,
                            num:1
                        },
                        {
                            name:'深入理解jvm',
                            price:188,
                            num:1
                        }
                    ]
                }
            },
            methods: {
                
            },
            computed:{
                //计算总价
                SumPrice(){
                    //获取当前的物品的id
                    let sumPrice = 0
                    for(let i in this.goods){
                        sumPrice += this.goods[i].price * this.goods[i].num
                        // console.log(this.goods[i].price, this.goods[i].num,  this.goods[i].price * this.goods[i].num)//nmd单词搞错了
                    }
                    return sumPrice
                }
            }
        })
    </script>
</body>

</html>